<script setup>
import {ref, onBeforeMount} from "vue";
import {ElAmap, lazyAMapApiLoaderInstance, useGeolocation} from "@vuemap/vue-amap";

const visible = ref(true)
// 缩放级别：数字越小，缩放级别越大，
const zoom = ref(18)
// 当前地图中心坐标
const center = ref([116.405285, 39.904989])
let map = null

onBeforeMount(() => {
  lazyAMapApiLoaderInstance.then(() => {
    useGeolocation({enableHighAccuracy: true, needAddress: true}).then(res => {
      const {getCurrentPosition, getCityInfo} = res;
      // 此接口只能使用Edge浏览器使用
      // getCurrentPosition().then(currentPosition => {
      //   center.value = currentPosition.position.toArray();
      //   console.log('currentPosition: ', currentPosition)
      // }).catch(e => {
      //   console.error('1', e)
      // })
      getCityInfo().then(cityResult => {
        console.log('cityResult: ', cityResult)
      }).catch(e => {
        console.error('2', e)
      })
    })
  })
})

const hide = () => {
  visible.value = !visible.value
}

const getLocation = (e) => {
  map = e
  console.log('getLocation: ', e)
}

// 鼠标选择触发
const selectPoi = (e) => {
  map = e
  console.log('selectPoi: ', e);
}

// 键盘选择触发
const choosePoi = (e) => {
  map = e
  console.log('choosePoi: ', e);
}

</script>

<template>
  <el-container>
    <el-main>
      <el-button type="primary" @click="hide()">
        {{ visible ? '隐藏全部控件' : '显示全部控件' }}
      </el-button>
      <el-card shadow="hover">
        <div style="width: 100%;height: 500px;">
          <el-amap :center="center" :zoom="zoom">
            <!--   地点搜索   -->
            <el-amap-search-box
                :visible="visible"
                placeholder="搜地点、找路线"
                :debounce="1000"
                @select="selectPoi"
                @choose="choosePoi"
            />
            <!--   选择地图类型   -->
            <el-amap-control-map-type :visible="visible"/>
            <!--   地图尺寸，一厘米   -->
            <el-amap-control-scale :visible="visible"/>
            <!--   地图缩放   -->
            <el-amap-control-tool-bar :visible="visible"/>
            <!--   地图控制旋转   -->
            <el-amap-control-control-bar :visible="visible"/>
            <!--   鹰眼控件，小地图   -->
            <!--<el-amap-control-hawk-eye :visible="visible" />-->
            <!--   获取当前位置   -->
            <el-amap-control-geolocation :visible="visible" @complete="getLocation" position="LB"/>
          </el-amap>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<style scoped>

</style>